<template>
  <div class="chat-sidebar">
    <div class="sidebar-header">
      <h3>英语对话</h3>
      <el-button class="new-chat-btn" type="primary" icon="el-icon-plus" @click="$emit('openNewChatDialog')">新建对话</el-button>
    </div>
    <div class="chat-contacts">
      <div v-for="chat in chats" :key="chat.id" :class="['contact-item', { active: chat.id === activeContact }]">
        <div class="contact-main" @click="$emit('selectContact', chat.id)">
          <img :src="chat.avatar" alt="avatar" width="40" height="40" />
          <div class="contact-info">
            <div class="contact-name">{{ chat.title }}</div>
            <el-tag size="mini" :type="getDifficultyType(chat.difficulty)" class="contact-difficulty">
              {{ getDifficultyLabel(chat.difficulty) }}
            </el-tag>
            <div class="contact-meta">
              <span>{{ chat.time }}</span>
            </div>
            <div class="contact-keywords">
              <el-tag v-for="kw in chat.keywords" :key="kw" size="mini" class="keyword-tag">{{ kw }}</el-tag>
            </div>
          </div>
        </div>
        <div class="contact-actions">
          <i class="el-icon-edit edit-icon action-icon" @click.stop="$emit('openSettingsDialog', chat.id)"></i>
          <i class="el-icon-delete delete-icon action-icon" @click.stop="$emit('deleteChat', chat.id)"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ChatSidebar',
  props: {
    chats: Array,
    activeContact: [String, Number, null],
    getDifficultyType: Function,
    getDifficultyLabel: Function
  }
}
</script>
<style scoped>
.chat-sidebar { width: 300px; border-right: 1px solid #eee; display: flex; flex-direction: column; }
</style>
